<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.staticfile.org/jquery/3.6.4/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/gsap/3.11.5/gsap.min.js"></script>
  
  <script src="https://cdn.staticfile.org/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
  <script src="https://cdn.staticfile.org/ScrollMagic/2.0.8/plugins/animation.gsap.min.js"></script>
  <script src="https://cdn.staticfile.org/ScrollMagic/2.0.8/plugins/debug.addIndicators.js"></script>
  <style>
    * {
      margin: 0;
      position: relative;
      padding: 0;
      border: 0;
      overflow: auto;
    }

    #container {
      margin: 0;
      position: relative;
      min-height: 2100px;
      width: 100%;
      background-color: orange;
    }

    #my-sticky-element {
      height: 100px;
      /* margin-top: 100px; */
      width: 100%;
      background-color: rgb(255, 255, 255);
      position: relative;
      margin-top: 700px ;
      /* visibility: hidden; */
    }
  </style>
</head>

<body>
  <div id="container">
    <div id="my-sticky-element"></div>
  </div>


  <script>

    var controller = new ScrollMagic.Controller()
    // create a scene
    new ScrollMagic.Scene({
      triggerElement: '#my-sticky-element',
      duration: 400, // the scene should last for a scroll distance of 100px
      // offset: 250, // start this scene after scrolling for 50px
    })
      // .setPin('#my-sticky-element') // pins the element for the the scene's duration
      .setTween("#my-sticky-element", 0.2, { backgroundColor: "green", scale: 2.5 })
      .addIndicators({name: "1 (duration: 300)"})
      .addTo(controller); // assign the scene to the controller
  </script>
</body>

</html>